<template>
  <div class="bg-white rounded-8px">
    <div class="p-30px text-24px font-600 border border-top-0 border-left-0 border-right-0">思维导图</div>
    <div class="p-30px">
      <el-tree
          style="max-width: 900px"
          :data="listData"
          :props="defaultProps"
          @node-click="handleNodeClick"
      >
          <template #default="{ node }">
              <!-- 动态绑定样式 -->
              <div :class="node.level == 1 ? 'text-16px font-500 text-dark-500': 'text-14px font-400'">
                  {{ node.label }}
              </div>
          </template>
      </el-tree>
    </div>
  </div>
  
</template>
<script setup>
  import { useUserStore } from '../../stores/user'
  import { configStore } from '../../stores/config'
  import { systemApi,userApi,httpApi } from '../../api/api'
  import { ElMessage } from 'element-plus'
  import { ref,onMounted,watch } from "vue"
  import { diffTwoDates,getToday } from '../../utils/tool'
  import { useRouter } from 'vue-router';
  
  import { Plus } from '@element-plus/icons-vue'
  
  const config = configStore();
  const lessonData = ref({})
  let listData = ref([])
  const router = useRouter();
 
  const init = async ()=>{
      lessonData.value = config.getBook()
      let res = await httpApi.getOutlineList(lessonData.value)
      console.log(res)
      if(res.code){
          listData.value = res.data
          console.log("数据",listData.value)
      }

  }
  const handleNodeClick = (data) => {
      console.log(data)
      
      if(data.teaching_id){
          let temp = {
              teaching_id:data.teaching_id
          }
          config.setCurrentOpen(temp)
          router.push({
              path: '/book/book/1' //默认跳转到原版教材
          });
      }

  }
  
  const defaultProps = {
      children: 'children',
      label: 'title',
      }
  // 科目变化时加载
  watch(() => config.$state.currentBook.book_id, () => {
      init()
  })

  onMounted(()=>{
      init();
  })
</script>